<template>
	<view class="container">
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">安全会议</view>
			<view class="right" @click="toPage('search')">
				<uni-icons type="search" size="20" color="#666"></uni-icons>
			</view>
		</view>
		<scroll-view @scrolltolower="getNextPageData" scroll-y="true" class="body">
			<!--入口-->
			<view class="items flex-row">
				<view @click="toPage('add')" class="item flex-column">
					<image src="../../../static/img/education/file-rect.png"></image>
					<view>新增会议</view>
				</view>
				<view @click="scanSign" class="item flex-column">
					<image src="../../../static/img/education/date-rect.png"></image>
					<view>签到签退</view>
				</view>
				<view @click="toPage('create')" class="item flex-column">
					<image src="../../../static/img/education/user-rect.png"></image>
					<view>我创建的</view>
				</view>
				<view @click="toPage('join')" class="item flex-column">
					<image src="../../../static/img/education/join-rect.png"></image>
					<view>我参加的</view>
				</view>
			</view>
			<!--列表-->
			<view class="card-box">
				<view class="card-box-title">我的会议</view>
				<view class="card-box-content">
					<view v-for="(item, index) in list" :key="index" @click="toDetail(item)" class="card">
						<view class="title flex-row">
							<view class="name">主题：{{ item.topic }}</view>
						</view>
						<view class="item flex-row">
							<view>负责人：{{ item.respons_man }}</view>
							<view style="width: 50%;">主讲：{{ item.host_man }}</view>
						</view>
						<view class="item"><view>参会人数：{{ item.user_num || 0 }}人</view></view>
						<view class="item"><view>开始时间：{{ item.starttime }}</view></view>
						<view class="item"><view>结束时间：{{ item.overtime }}</view></view>
						<view class="item"><view>会议地址：{{ item.address }}</view></view>
						<view class="item"><view>参与人员：<text @click.stop.prevent="toLookJoinMember(item.join_man_names)">点击查看</text></view></view>
						<view class="item flex-row btns">
							<view class="btn">{{ item.joc == 1 ? '我创建的' : '我参与的' }}</view>
							<view v-if="item.status == 1" class="btn">未开始</view>
							<view v-if="item.status == 2" class="btn doing">进行中</view>
							<view v-if="item.status == 3" class="btn done">已完成</view>
						</view>
					</view>
					<view class="nodata">没有更多了~</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default{
	components: { uniIcons },
	data(){
		return {
			userid: uni.getStorageSync('userid'),
			page: 1,
			total: 1,
			list: []
		}
	},
	onShow(){
		this.getList();
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toPage(url){
			if(url) uni.navigateTo({url});
		},
		toDetail(item){
			uni.navigateTo({
				url: 'detail?id='+item.id+'&joc='+item.joc
			});
		},
		scanSign(){
			let _this = this
			uni.scanCode({
				onlyFromCamera: true,
				scanType: ['qrCode'],
				success: (res)=>{
					let { meet_id,type } = JSON.parse(res.result);
					uni.request({
						url: _this.$API.eduSafeMeetingSignIn,
						data: {
							type: type,
							meet_id: meet_id,
							userid: _this.userid
						},
						method: 'POST',
						header: _this.$API.get_head(),
						success: (res)=>{
							uni.showToast({
								icon: 'none',
								title: res.data.message
							})
							_this.getList();
						},
						fail: ()=>{
							uni.showToast({
								icon: 'none',
								title: type == 'in' ? '签到失败' : '签退失败'
							})
						}
					})
				}
			})
		},
		// 查看参与人员列表
		toLookJoinMember(members){
			uni.setStorageSync('joined_members', members);
			uni.navigateTo({
				url: 'joinMember'
			})
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: this.$API.eduSafeMeetingMyMeeting,
				data: { userid: this.userid },
				header: this.$API.get_head(),
				success: (res)=>{
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.getList();
			}
		}
	}
}
</script>

<style scoped>
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}

.body{
	height: calc(100vh - 88upx - var(--status-bar-height));
}


/*卡片容器*/
.card-box{
	padding: 20upx 0 2upx;
	background: #FBFBFB;
	margin: 20upx 0 0;
}
.card-box-title{
	font-weight: bold;
	text-indent: 40upx;
	position: relative;
}
.card-box-title::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #609EF4;
	border-radius: 4upx;
	position: absolute;
	top: 12upx;
	left: 20upx;
}
.card-box-content{
	padding-top: 10upx;
}
.card{
	margin: 0 20upx 20upx;
	border-radius: 16upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	text-indent: 20upx;
}
.card .item text{
	color: #41A4E8;
}
.card .item.btns{
	margin-bottom: 16upx;
	padding-left: 20upx;
	padding-top: 10upx;
	justify-content: flex-start;
}
.card .item.btns .btn{
	color: #fff;
	width: 160upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	text-indent: 0;
	margin-right: 20upx;
	background-color: #1692DC;
}
.card .item.btns .btn.doing{
	background-color: #EB6438;
}
.card .item.btns .btn.done{
	background-color: #0AD121;
}

/*入口*/
.items{
	background: #fff;
	padding: 20upx 40upx;
}
.items .item image{
	width: 130upx;
	height: 130upx;
}
.items .item view{
	font-size: 28upx;
}
</style>
